// 导入vuex的权限模块
import { constantRoutes, asyncRoutes } from '@/router/index'

// vuex中的permission模块用来存放当前的静态路由 + 当前用户的权限路由
const state = {
  routes: constantRoutes // 所有用户默认用户的静态路由
}
const mutations = {
  // newRouters 可以认为是 用户登录 通过权限所得到的动态路由部分
  // 定义一个修改router的mutations的方法
  setRouters(state, newRoutes) { // newRoutes 是载荷 是登录成功后需要添加的新路由
    // 下面这个写是不对的 不是语法不对  是业务不对
    // state.router = [...state.router, ...newRoutes]
    // 有一种情况 例如张三登录获取了动态路由 则追加到路由上 李四登录4个动态路由，那么应该是每次更新 都应该在静态路由的基础上进行追加
    state.routes = [...constantRoutes, ...newRoutes]
  }

}
const actions = {
  // 筛选动态路由
  // 第二个参数为当前的所拥有的菜单权限
  // menus: [ "settings","permissions..."]
  // asyncRoutes是所有的动态路由
  // asyncRoutes是所有的动态路由
  // asyncRoutes [{ path: 'setting', name: 'setting'}]
  // 定义一个筛选路由方法
  filterRoutes(context, menus) {
    // 定义一个常量  用来存储asyncRoutes遍历后所新建的新数组
    const routes = []
    // 筛选出动态路由中的menus中能够对上的路由
    menus.forEach(key => {
      routes.push(...asyncRoutes.filter(item => item.name === key)) // 得到一个新数组 有可能有元素 有可能没有元素
    })
    // 得到的routes是所有模块中满足权限要求的路由数组
    // routes就是当前用户所拥有的动态路由的权限
    context.commit('setRouters', routes) // 将动态路由提交给mutations
    return routes // 这里为什么要return  因为state数据是用来显示左侧菜单中的 return是给路由addRoutes用的
  }
}
export default {
  namespaced: true, // 命名空间
  state,
  mutations,
  actions
}
